<template>
    <div>
        <h4>(激活)路由信息对象</h4>
        <pre>
        vue-router模块在vue项目中通过 .use 方法安装时，提供了 $route 组件全局变量；
        $route变量通过如下方式完成全局注册 【$route为一个只读型变量】
            Object.defineProperty(app.config.globalProperties, '$route', {
                enumerable: true,
                get: () => unref(currentRoute),
            });

        $route 全局变量存储的是当前vue项目中某个路由组件的相关配置和相关信息数据
               记录的路由信息是当前正在访问的路由对应的相关信息
        </pre>
        <input type="button" value="打印当前的路由信息数据" @click="printRouteConfig()">
        <div class="box">
            <RouterParamsChildOne></RouterParamsChildOne>
        </div>
        
        <h4>路由元信息</h4>
        <pre>
        元信息：最小单元信息数据=>用于存储和记录不会反复变化相关配置；
        路由信息对象$route 中的 meta 属性记录了路由对应的元信息数据；
        路由元信息数据需要在路由表配置时，由开发者自行定义描述;
        参考:项目右下角浮动按钮
        </pre>

        <h4>路由切换的参数传递</h4>
        
        <ul>
            <li>URL 查询参数
                <ol>
                    <li>查询参数规则是借助常规http query string params 规则进行参数传递和定义的</li>
                    <li>路由跳转时，在路由地址后以?分割参数，参数与参数直接以&相连，参数和值直接以=方式分割</li>
                    <li>URL通过路由切换携带查询参数，在激活路由信息对象$route.query属性中已经被解析为直接可用的响应式对象了</li>
                </ol>
            </li>
            <li>URL REST参数(动态路由地址)
                <ol>
                    <li>REST参数规则是参考 Resfull请求的地址隐藏参数规则，进行参数传递和定义的</li>
                    <li>
                        REST参数将参数本身作为地址栏的一部分进行隐藏，并完成参数的传递，同时需要在对应的路由配置path以:方式描述参数位置
                        <pre>
                        例如:
                            路由表 path 配置为  /params/rest/:id/:name  ==> 路由地址由4部分组成，前两分段为静态路由地址，后两个分段为动态参数地址
                            路由表 path 配置为  /params/:id/rest/:name  ==> 路由地址由4部分组成，第一和第三分段为静态路由地址，第二和第四分段为动态参数地址
                        </pre>
                    </li>
                    <li>REST 参数在路由地址配置的过程中，可以通过?描述动态参数为可选状态【例如：/params/rest/:id?/:name? => id 和 name 可以传递也可以不传递】</li>
                </ol>
            </li>
        </ul>

        <h4>路由切换缓存</h4>
        <ul>
            <li>Vue为了优化组件在浏览器中使用率和内存占用量,做了路由组件的缓存操作,减少资源消耗</li>
            <li>如果发现跳转的地址指向的路由组件 ，为当前激活路由组件 （组件相同），vue将不再对当前组件进行重新渲染绑</li>
            <li>因为路由组件缓存导致组件不重新渲染，因此组件mounted钩子函数之前的生命周期都将将不会被重复执行</li>
            <li>如果同路由切换时存在参数变化，需要在对应的路由组件中自动加载新的数据参数时，将不能使用生命周期方式</li>
            <li>可以通过vue-router路由模块补充的组件配置函数 beforeRouteUpdate 进行路由切换时参数更新监听</li>
        </ul>

        <p>查询参数传递</p>
        <RouterLink to="/params/query?id=10001&name=tom">查询参数-参数1-?id=10001&name=tom-to属性取值字符串</RouterLink> <br>
        <RouterLink to="/params/query?id=10003&name=jack">查询参数-参数2-?id=10003&name=jack-to属性取值字符串</RouterLink> <br>
        <RouterLink 
            :to=" {
                path:'/params/query',
                query:{
                    id:'10004',
                    name:'aaaa'
                }
            } "
        >查询参数-参数2-动态参数-to属性取值对象</RouterLink> <br>
        <input v-model="user.id" placeholder="id参数" type="text" />
        <input v-model="user.name" placeholder="name参数" type="text" /> <br>
        <RouterLink :to=" `/params/query?id=${user.id}&name=${user.name}` ">查询参数-参数3-动态参数-to属性取值字符串</RouterLink> <br>
        <RouterLink 
            :to=" {
                path:'/params/query',
                query:user
            } "
        >查询参数-参数3-动态参数-to属性取值对象</RouterLink> <br>
        <p>具名路由跳转</p>
        <!-- { path:"asdasdasdasdasd",name:"query",component: () => import( /* webpackChunkName:"router" */ "@/pages/RouterPages/views/QueryRouter.vue" ) }, -->
        <RouterLink 
            :to=" {
                name:'query',
                query:user
            } "
        >查询参数-参数3-动态参数-具名路由-to属性取值对象</RouterLink> <br>
        <hr>
        <p>REST参数传递</p>
        <!--  { path:"rest/:id/:name",component: () => import( /* webpackChunkName:"router" */ "@/pages/RouterPages/views/RestRouter.vue" ) }, -->
        <RouterLink to="/params/rest/10001/tom">REST参数-参数1-?id=10001&name=tom-to属性取值字符串</RouterLink> <br>
        <RouterLink to="/params/rest/10003/jack">REST参数-参数2-?id=10003&name=jack-to属性取值字符串</RouterLink> <br>
        <!-- rest风格参数支持 path 路径对象模式 -->
        <!-- <RouterLink 
            :to="{
                path:'/params/rest',
                params:{
                    id:'10004',
                    name:'ccccc'
                }
            }"
        >REST参数-参数2-?id=10003&name=jack-to属性取值对象</RouterLink> <br> -->
        <input v-model="stu.id" placeholder="id参数" type="text" />
        <input v-model="stu.name" placeholder="name参数" type="text" /> <br>
        <RouterLink :to=" `/params/rest/${stu.id}/${stu.name}` ">REST参数-参数3-动态参数-to属性取值字符串</RouterLink> <br>
        <RouterLink 
            :to="{
                name:'rest',
                params:stu
            }"
        >REST参数-参数2-?id=10003&name=jack-to属性取值对象-具名路由</RouterLink> <br>
        <div class="box">
            <RouterView></RouterView> 
        </div>
    </div>
</template>

<script>
import RouterParamsChildOne from "@/components/RouterParamsChildOne.vue";
    export default {
        data() {
            return {
                user:{
                    id:"",
                    name:""
                },
                stu:{
                    // path:"rest/:id/:name"
                    // id:"10005",
                    // name:"tom"

                    // path:"rest/:id/:name" ==> rest//
                    id:"",
                    name:""
                }
            }
        },
        components:{
            RouterParamsChildOne
        },
        methods: {
            printRouteConfig() {
                console.log( this.$route )
            }
        },
        
    }
</script>

<style lang="scss" scoped>
.box{
    border: 1px solid #ccc;
    margin: 10px;
    padding: 20px;
}
</style>